<script setup>
import { ref, watchEffect, h, render, nextTick, onUpdated } from 'vue'
import { userApi } from '@/api'
import { colleges, authoritys } from '@/utils/defines'
const loading = ref(false)
const data = ref(null)
const inputRef = ref(null)
const update =ref(true)
watchEffect(async () => {
    loading.value = true
    update.value= !update.value
    await userApi.getUserInfos().then((res) => {
        data.value = res.data
    })
    loading.value = false
})

const inputBlur = (row, col) => {
    // 失焦
    row.isClick[col.property] = false
    // 判断 是否与旧数据 相同
    console.log(row.oldValue)
    row.editStatus = Object.keys(row.oldValue).some(v=>row.oldValue[v] !== row[v])

        // map(
        // v => {
        //     console.log(row.oldValue[v], row[v])
        //     return row.oldValue[v] == row[v]
        // }).reduce(
        //     (x, y) => { return x | y })
    console.log(row.editStatus)

    // 若相同 操作符
    // 若不同，操作符 使修改可用
}
function clearToDefault(row, column) {
    // 恢复初始值
    row[column.property] = row.oldValue[column.propery]
    // // 按钮失活
    row.editStatus = null
    row.isClick[column.property] = false
}

const dbClicks = (row, col, cell, event) => {
    // 显示input
    if (row.isClick == null)
        row.isClick = {}
    if (row.oldValue == null) {
        row.oldValue = {}
    }
    if (row.oldValue[col.property] == null) {
        row.oldValue[col.property] = row[col.property]
    }
    row.isClick[col.property] = true

    // 聚焦
    nextTick(() => {
        if (inputRef.value) {
            inputRef.value.focus()
        }
    })

    // 
}
const add = () => {
    data.value.unshift({
        "userId": null,
        "userName": "",
        "userNumber": '',
        "college": 0,
        "phone": "1234567890",
        "email": "xaut@qq.com",
        "authority": 0,
        "userRemark": '',
        'isClick': {
            'userNumber': true,
        },
        'oldValue': {
            'userNumber': ''
        },
        'addStatus':true
    })
    nextTick(() => {
        if (inputRef.value) {
            inputRef.value.focus()
        }
    })

}
onUpdated(() => {

})
const eidtInformation = (row) => {

    console.log(row)
    userApi.updateUser(row).then(() => {
        update.value = !update.value
        
    })
    // row.editStatus = null
}
const deleteInformation = async (row) => {
    console.log('delete', row)

    await userApi.deleteUser(row).then(()=>{
        update.value = !update.value
    })

}
const addInformation = async (row) => {
    await userApi.addUser(row)
    console.log('add', row)
    row.addStatus = null
    update.value = !update.value
}

const defaultInformation = (row) => {
    Object.keys(row.oldValue).forEach(v =>
    {
        row[v] = row.oldValue[v];
    }
    )
    row.editStatus = null

}
function cancelInformation(scope) {
    console.log('取消',scope)
    // data.value
    data.value.pop()
}

</script>

<template>

    <div v-loading="loading" style="width:90vw;margin:50px;height:90vh">
        <el-table :data=data table-layout="auto" :stripe="true" @cell-dblclick="dbClicks">
            <el-table-column property="userNumber" label="工号" align="center" style="width:10em;padding:0px;margin:0px;">
                <template #default="{ row, column }">
                    <el-input class="input"
                        v-if="(row.isClick == null) ? false : ((row.isClick[column.property] == null) ? false : row.isClick[column.property])"
                        ref="inputRef" @blur="inputBlur(row, column)" v-model="row[column.property]"></el-input>
                    <span v-else>
                        {{ row[column.property] }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column property="userName" label="姓名" align="center" style="width:10em">
                <template #default="{ row, column }">
                    <el-input class="input"
                        v-if="(row.isClick == null) ? false : ((row.isClick[column.property] == null) ? false : row.isClick[column.property])"
                        ref="inputRef" @blur="inputBlur(row, column)" v-model="row[column.property]"></el-input>
                    <span v-else>
                        {{ row[column.property] }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column property="college" label="学院" align="center">
                <template #default="{ row, column }">
                    <el-select class="input"
                        v-if="((row.isClick == null) ? false : ((row.isClick[column.property] == null) ? false : row.isClick[column.property]))"
                        ref="inputRef" @blur="inputBlur(row, column)" v-model="row[column.property]" automatic-dropdown
                        fit-input-width style="width:16em">
                        <el-option v-for="(item, index) in colleges" :key="index" :value="index"
                            :label="item">{{ item }}
                        </el-option>
                    </el-select>
                    <span v-else>
                        {{ colleges[row[column.property]] }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column property="phone" label="电话" align="center" style="width:10em">
                <template #default="{ row, column }">
                    <el-input class="input"
                        v-if="(row.isClick == null) ? false : ((row.isClick[column.property] == null) ? false : row.isClick[column.property])"
                        ref="inputRef" @blur="inputBlur(row, column)" v-model="row[column.property]" style="width:9em"></el-input>
                    <span v-else>
                        {{ row[column.property] }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column property="email" label="邮箱" align="center" style="width:10em">
                <template #default="{ row, column }">
                    <el-input class="input"
                        v-if="(row.isClick == null) ? false : ((row.isClick[column.property] == null) ? false : row.isClick[column.property])"
                        ref="inputRef" @blur="inputBlur(row, column)" v-model="row[column.property]" style="width:180px"></el-input>
                    <span v-else>
                        {{ row[column.property] }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column property="authority" label="权限" align="center" style="width:10em">
                <template #default="{ row, column }">
                    <el-select class="input"
                        v-if="((row.isClick == null) ? false : ((row.isClick[column.property] == null) ? false : row.isClick[column.property]))"
                        ref="inputRef" @blur="inputBlur(row, column)" v-model="row[column.property]" automatic-dropdown
                        fit-input-width style="width:16em">
                        <el-option v-for="(item, index) in authoritys" :key="index" :value="index"
                            :label="item">{{ item }}
                        </el-option>
                    </el-select>
                    <span v-else>
                        {{ authoritys[row[column.property]] }}
                    </span>
                </template>
            </el-table-column>




            <el-table-column property="userRemark" label="备注" align="center" style="width:10em">
                <template #default="{ row, column }">
                    <el-input class="input"
                        v-if="(row.isClick == null) ? false : ((row.isClick[column.property] == null) ? false : row.isClick[column.property])"
                        ref="inputRef" @blur="inputBlur(row, column)" v-model="row[column.property]"></el-input>
                    <span v-else>
                        {{ row[column.property] }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column align="center">
                <template #header>
                    <el-button @click="add">添加</el-button>
                    <el-button @click="update=!update">更新</el-button>
                </template>
                <template #default="scope">
                    <div v-if="scope.row.addStatus == null ? false : true">
                        <el-button type="warning" @click="addInformation(scope.row)">确认</el-button>
                        <el-button type="warning" @click="cancelInformation(scope)">取消</el-button>
                    </div>
                    <div v-else-if="scope.row.editStatus == null ? false : scope.row.editStatus">
                        <el-button type="primary" @click="eidtInformation(scope.row)">
                            修改
                        </el-button>
                        <el-button type="success" @click="defaultInformation(scope.row)">恢复</el-button>
                    </div>
                    <el-button v-else type="danger" @click="deleteInformation(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scope>
.input {
    * {
        padding: 0;
        margin: 0;
    }

    ;
    height:100%;
    width:calc(4em + 1px);
}
</style>